<template>
	<view>
		<view class="u-p-30 bg-white filter-panel-search">
			<view class="u-flex">
				<view class="u-flex-1">
					<u-search v-model="key" placeholder="搜索" :show-action="false" shape="square" clearabled @change="getList"></u-search>
				</view>
				<view class="u-p-l-30">
					<button size="mini" @click="showWindow = true" class="u-h-64" style="display: block;">
						<view class="u-flex u-align-items u-justify-content u-h-60">
							<u-icon name="plus" size="28" class="u-tips-color"></u-icon>
							<text class="u-p-l-10 u-tips-color">新建</text>
						</view>
					</button>
				</view>
			</view>
		</view>
		<view 
			class="grid-box border-shadow u-m-b-20" 
			v-for="(item,index) in list"
			:key="item.id"
		>
			<view class="title u-border-bottom">
				<view class="u-flex">
					<text class="u-font-32 name">{{item.name}}</text>
					<text>{{ userdetail.id == item.userid?'(我)':'' }}</text>
				</view>
				<view class="u-m-t-10">
					<text class="u-tips-color">{{item.rolenames}}</text>
				</view>
			</view>
			<view class="label">
				<view class="u-flex">
					<view class="u-flex-1">
						<view class="u-p-b-10"><text class="u-tips-color u-font-24">手机号码</text></view>
						<view><text class="price u-font-32">{{item.mobile}}</text></view>
					</view>
					<view class="u-flex-1">
						<view class="u-p-b-10"><text class="u-tips-color u-font-24">是否站点管理员</text></view>
						<view>
							<!-- <text class="price u-font-32">{{item.ismanager || '未绑定'}}</text> -->
							<u-switch v-model="item.ismanager" size="40" @change="switchState($event, item)"></u-switch>
							<!-- <text class="u-font-32">{{item.ismanager?'是':'否'}}</text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="bottom u-m-t-20">
				<view class="u-flex">
					<view class="u-flex-1">
						<u-icon name="calendar" class="u-m-r-5 u-tips-color" size="28"></u-icon>
						<text class="u-font-26 u-tips-color">{{item.lastlogindatetime}} 上次登录</text>
					</view>
					<u-button type="error" size="mini" @click="removeStaff(item)"><u-icon name="close-circle" color="#ffffff" class="u-p-r-10" size="28"></u-icon>移除</u-button>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />
		
		<u-modal
			v-model="showWindow" 
			:show-cancel-button="true" 
			:negative-top="200" 
			title="添加店员" 
			@confirm="createStaff"
			@cancel="cancelStaff">
			<scroll-view :scroll-y="true" class="slot-content">
				<u-form label-width="180rpx" class="u-p-l-30 u-p-r-30 u-p-t-30">
					<u-form-item label="选择员工" class="u-p-0" required>
						<view class="input-text u-flex u-m-l-0" @click="show = true;">
							<text>{{addForm.name || '点击选择员工'}}</text>
							<view class="u-flex-1"></view>
							<u-icon name="arrow-right" class="tips-txt"></u-icon>
						</view>
					</u-form-item>
					<staff-list v-model="show" @confirm="confirmStaff" @close="show = false"></staff-list>
				</u-form>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	import staffList from '@/components/form-select-type/staff-list.vue'
	import {
		mapState,
	} from 'vuex';
		
	export default {
		components:{
			staffList,
		},
		props:{
			sendStoreId:{
				type: [Number,String],
				default: 0
			}
		},
		data() {
			return {
				key: '',
				pageIndex: 1,
				pageSize: 20,
				list: [],
				loadStatus: 'loadmore',
				addForm:{
					name: '',
					id: 0
				},
				show: false,
				showWindow: false
			}
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				operatorid: state => state.operatorid,
				storeId: state => state.storeId
			})
		},
		onReachBottom(e) {
			// 此tab为空数据
			this.pageIndex += 1
			if (this.loadStatus == 'loadmore') {
				this.getList()
			}
		},
		onLoad() {
			this.getList(true)
		},
		mounted() {
			this.getList(true)
		},
		methods: {
			confirmStaff(item) {
				console.log(item)
				this.addForm.name = item.name
				this.addForm.userId = item.id
				this.addForm.mobile = item.mobile
			},
			getList(isSearch = false){
				// 关键词搜索
				if(isSearch){
					this.PageIndex = 1
					this.list = []
					this.loadStatus = 'loadmore'
				}
				this.$u.post('/Store/staff/List', {
					"PageIndex": this.pageIndex,
					"pageSize": this.pageSize,
					"Key": this.key,
					"storeId": this.sendStoreId || this.storeId
				}).then((res) => {
					console.log(res)
	
					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							this.list.push(item)
						})
						if (res.rows.length < this.PageSize) {
							this.loadStatus = "nomore"
						} else {
							this.loadStatus = "loadmore"
						}
					} else {
						this.loadStatus = "nomore"
					}
				}).catch(() => {
					
				})
			},
			//修改状态
			switchState(event, item) {
				this.$u.get(`/store/staff/SetManager?storeId=${this.storeId}&userId=${item.id}&isSet=${event}`).then((res) => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				}).catch((err) => {
					this.getList(true)
				})
			},
			// 离职员工
			removeStaff(item){
				uni.showModal({
					content: `此操作将该员工移除《${item.store.name}》的操作权限, 是否继续?`,
					success: (res)=> {
						if (res.confirm) {
							this.$u.post(`/Store/Staff/Remove?storeId=${this.sendStoreId || this.storeId}&UserId=${item.id}`).then((res) => {
								console.log(res)
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								this.getList(true)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 添加店员
			createStaff(){
				// uni.navigateTo({
				// 	url: '/pages/shop/staff/create/create'
				// })
				this.$u.post('/Store/Staff/Add', {
					"storeId": this.sendStoreId || this.storeId,
					"userId": this.addForm.userId,
					"mobile": this.addForm.mobile
				}).then((res) => {
					console.log(res)
					this.showWindow = false
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.addForm = {
						name: '',
						id: 0
					}
					this.getList(true)
				})
			},
			cancelStaff(){
				this.addForm = {
					name: '',
					id: 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	.input-text {
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 70rpx;
		margin: 20rpx 0;
		padding-right: 20rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
		width: 100%;
		margin-left: 30rpx;
		input{
			height: 70rpx;
		}
	}
</style>
